<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="编号" width="120" />
    <el-table-column prop="username" label="账号" width="120" />
    <el-table-column prop="nickName" label="姓名" width="120" />
    <el-table-column prop="email" label="邮箱" width="120" />
    <el-table-column label="添加时间" width="120">
      <template #default="scoped">
        {{ scoped.row.createTime ? dayjs(scoped.row.createTime).format("YYYY-MM-DD HH:mm:ss"): "/" }}
      </template>
    </el-table-column>
    <el-table-column label="最后登录" width="120">
      <template #default="scoped">
        {{ scoped.row.loginTime ? dayjs(scoped.row.loginTime).format("YYYY-MM-DD HH:mm:ss") : "/" }}
      </template>
    </el-table-column>
    <el-table-column label="是否启用" width="120">
      <template #default="scoped">
        <el-switch :model-value="scoped.row.status===1?true:false" />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="120">
      <template #default="scoped">
        <el-button type="primary" link>分配角色</el-button>
        <el-button type="primary" link>编辑</el-button>
      </template>
    </el-table-column>

  </el-table>

  <!-- 分页器 -->
  <el-pagination v-model:currentPage="pagination.pageNum" v-model:page-size="pagination.pageSize"
    :page-sizes="[1, 5, 10, 20]" :small="true" layout="total, sizes, prev, pager, next, jumper"
    :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />



</template>
<script setup lang="ts">
import * as api from "@/request/api";
import type { IAdminListItem } from "@/request/UmsAdminController/index"
import dayjs from "dayjs";

import { ref, type Ref } from "vue";

const tableData: Ref<IAdminListItem[]> = ref([]);

// 分页器：写成响应式，不然样式不会变
const pagination = ref({
  pageNum: 1,
  pageSize: 5,
  total: 0,
  totalPage: 0,
})

// 请求获取用户信息列表
async function getAdminListInfo() {
  let result = await api.admin.getAdminList({
    pageNum: pagination.value.pageNum,
    pageSize: pagination.value.pageSize
  });
  console.log(result);
  let { pageNum, pageSize, total, totalPage, list } = result;
  tableData.value = list;
  pagination.value = { pageNum, pageSize, total, totalPage };
}
getAdminListInfo();





const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  console.log(val);

  pagination.value.pageSize = val;
  getAdminListInfo();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  pagination.value.pageNum = val;
  getAdminListInfo();
}


</script>

<style scoped lang="scss">

</style>